<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/mobile/need/layer.css">

    <!-- 引入组件库 -->
    <script src="js/layer.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/cookietool.js"></script>
</head>

<body style="overflow: hidden">

<div class="wrapper hp_1">

    <div id="app">
        <my-header></my-header>
    </div>

    <div class="form_popup">

        <div class="login_form" id="login_form">
            <div class="hd-lg">
                <img src="images/logo.png" alt="">
                <span>登录您的Corn帐户</span>
            </div>
            <!--hd-lg end-->
            <div class="user-account-pr">
                <form onsubmit="return false;">
                    <div class="input-sec">
                        <input type="text" name="username" v-model="username" placeholder="账号">
                    </div>
                    <div class="input-sec">
                        <input type="Password" name="password" v-model="password" placeholder="密码">
                    </div>
                    <div class="error" v-if="error">
                        <p>
                            {{errorMsg}}
                        </p>
                    </div>
                    <div class="chekbox-lg">
                        <label>
                            <input type="checkbox" @click="isRemember()" name="remember" ref="rememberPsd"
                                   value="rem">
                            <b class="checkmark"> </b>
                            <span>记住密码</span>
                        </label>
                    </div>
                    <div class="input-sec mb-0">
                        <button @click="login()" type="button">登录</button>
                    </div>
                    <!--input-sec end-->
                </form>
                <a href="#" title="" class="fg_btn">忘记密码?</a>
            </div>
            <!--user-account end--->
            <div class="fr-ps">
                <h1>还没有帐号? <a href="signup.html" title="" class="show_signup"> 点此注册。</a></h1>
            </div>
            <!--fr-ps end-->
        </div>
        <!--login end--->

    </div>
    <!--form_popup end-->


</div>
<!--wrapper end-->

<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/header.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
<style>

    .error {
        padding: 0 0 19px 10px;
    }

    .error p {
        color: red;
    }
</style>
<script>
    var app = new Vue({
        el: '#app',
    })

    new Vue({
        el: "#login_form",
        data() {
            return {
                ip: "localhost",
                username: '',
                password: '',
                error: false,
                errorMsg: "账号或密码错误"
            }
        },
        created() {
            // this.loadUser();
        },
        methods: {
            /*loadUser() {
                if (localStorage.getItem("username") && localStorage.getItem("password")) {
                    this.username = localStorage.getItem("username")
                    this.password = localStorage.getItem("password")
                }
            },*/

            login() {
                layer.msg('正在登录');
                axios.post("http://" + this.ip + ":11001/api/oauth/login", {
                    "username": this.username,
                    "password": this.password
                }).then(res => {
                    if (res.data.flag) {
                        console.log(res.data.userInfo)
                        console.log(res.data);
                        localStorage.setItem("uid",res.data.data.jti)
                        location.href = "index.html"
                        localStorage.setItem("user", JSON.stringify(res.data.data.userInfo))
                        console.log(localStorage.getItem("user"))
                    } else {
                        this.error = true
                    }
                })
            },
            isRemember() {
                let remPsd = this.$refs.rememberPsd.checked
                if (remPsd) {
                    localStorage.setItem("username", this.username)
                    localStorage.setItem("password", this.password)
                } else {
                    localStorage.removeItem("username")
                    localStorage.removeItem("password")
                }
            }

        }
    })
</script>
</body>

</html>
